/* 
    此模块是用户中心_用户管理_菜单维护
    crteae by xyr on 2017/09/12
 */

<template>
    <div class="app-container">
        <div class="wrapper menu">
            <!-- 功能树菜单.start -->
            <el-col :span="8" class="warp-main">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>功能树</p>
                    <!-- 
                                :data 树数据
                                :node-key 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的
                                :default-expanded-keys="[2, 3]" 默认展开的节点的 key 的数组
                                :default-checked-keys="[5]" 默认勾选的节点的 key 的数组
                                :props="props" 参数列表
                                @check-change 节点选中状态发生变化时的回调
                                @node-click 节点被点击时的回调
                                :load 加载子树数据的方法
                        -->
                    <el-tree ref="functionTree" 
                            :data="regions" 
                            :props="props" 
                            :load="loadNode" 
                            node-key="id" 
                            lazy  
                            @node-click="handleNodeClick" default-expand-all >
                    </el-tree>
                </div>
            </el-col>
            <!-- 功能树菜单.end -->

            <!-- 功能信息.start -->
            <el-col :span="16" class="warp-main" style="padding-left:30px;">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>功能信息</p>
                    <el-form ref="functionForm" :model="functionForm" autoComplete="on" :rules="functionRules" label-width="120px">
                        <el-form-item label="功能名称" prop="name">
                            <el-input v-model="functionForm.name" autoComplete="on" placeholder="请输入功能菜单名字" style="width:60%;"></el-input>
                            <el-checkbox v-model="functionForm.isMenu" label="是否菜单"></el-checkbox>
                            <el-checkbox v-model="functionForm.active" label="是否停用"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="URL" prop="url">
                            <el-input v-model="functionForm.url" autoComplete="on" placeholder="请输入功能菜单URL"></el-input>
                        </el-form-item>
                        <el-form-item label="所属功能ID" prop="belongId">
                            <el-input v-model="functionForm.belongId" placeholder="如果是根菜单,此处为空"></el-input>
                        </el-form-item>
                        <el-form-item label="上级菜单" >
                            <el-input v-model="parentNodeName" :disabled="true" placeholder="如果是根菜单,此处为空"></el-input>
                        </el-form-item>
                        <div class="form-btn">
                            <el-form-item>
                                <el-button type="primary" class="iconfont icon-xinzeng" @click="addFunction">新增</el-button>
                                <el-button type="success" class="iconfont icon-baocun" @click="saveFunction">保存</el-button>
                                <el-button type="danger" icon="el-icon-delete" :disabled="disableFunctionDeleteButton" @click="deleteFunction">删除</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-col>
            <!-- 功能信息.end -->
        </div>
    </div>
</template>

/* 
 数据处理
 */
<script>


export default {
    data() {
        // 表单校验
        // 功能名称校验
        const validateName = (rule, value, callback) => {
            if (value.length < 2) {
				callback(new Error('功能菜单名称不能为空'));
			} else {
				callback();
			}
        };

        // 功能URl校验
        const validateFunctionUrl = (rule, value, callback) => {
            if (value.length < 2) {
                callback(new Error('请输入功能菜单的URL'))
            } else {
                callback();
            }
        };

        // 所属功能的ID校验
        const validateBelongId = (rule, value, callback) => {
            if (value.length < 2) {
                callback(new Error('请输入所属功能ID'))
            } else {
                callback();
            }
        };

        return {
            //== 左边树菜单.start
            // 树菜单数据加载
            regions: [],
            // 数据菜单参数
            props: {
                label: 'name',
                children: 'zones'
            },
            count: 3,
            //== 左边树菜单.end

            //== 右边功能信息.start
            functionForm: {
                id: '',
                name: '',
                isMenu: true,
                active: false,
                url: '',
                belongId: ''
            },
            // checkList: ['是否菜单'],

            // 表单校验
            functionRules: {
                name: [
                    { required: true, trigger: 'blur', validator: validateName }
                ],
                url: [
                    { required: true, trigger: 'blur', validator: validateFunctionUrl }
                ]
                /* belongId: [
                    { required: true, trigger: 'blur', validator: validateBelongId }
                ] */
            },

            // 全局变量配置
            // 删除按钮禁用
            disableFunctionDeleteButton: true,
            // 是否新增功能菜单
            isAddFunction: true,
            // 是否修改功能菜单
            isUpdateFunction: false,
            // 当前选中功能菜单节点的ID
            selectNodeId: '',
            // 当前所选的节点的上级菜单
            parentNodeName: '',
            // 当前所选节点的名字
            selectNodeName: ''


            //== 右边功能信息.end
        }; // end of return
    }, // end of data
    created() { // 页面加载时候,就初始化数据
        // this.loadNode(node, resolve);
    },
    methods: { // 方法集合
        // 树节点被点击时候的回调
        handleNodeClick(data,node,resolve) {
            // 得到当前节点的id
            let _id = data.id;
            // 获得当前节点的名字
            let _name = data.name;

            // 得到父菜单的data id
            let _parentId = node.parent.data.id;

            if (typeof _parentId == 'undefined') {
                _parentId = '';
            }
            
            // 根据ID,获得当前节点的信息,并且赋值给右边表单
            if (typeof _id != 'undefined' && _id.length > 0) {
                // 直接获得当前节点的data进行赋值,不需要再请求后台进行交互
                this.functionForm.id = data.id;
                this.functionForm.name = data.name;
                this.functionForm.isMenu = data.isMenu == 0 ? false : true;
                this.functionForm.active = data.active == 0? false : true;
                this.functionForm.url = data.url;
                this.functionForm.belongId = data.belongId;
                // 赋值到全局变量,
                this.selectNodeId = data.id;
                // 得到当前节点的上级菜单名字
                let parentNodeNameTemp = node.parent.data.name;
                if (typeof parentNodeNameTemp != 'undefined') {
                    this.parentNodeName = parentNodeNameTemp
                } else {
                    this.parentNodeName = '';
                }
                // 赋值到全局当前所选节点的名字,在此节点增加节点的时候,用于显示
                this.selectNodeName = data.name;
                
                
                // 打开删除按钮,可以删除
                this.disableFunctionDeleteButton = false;
                // 可以修改
                this.isAddFunction = false;
                this.isUpdateFunction = true;
            }

        },
        // 加载树菜单的子节点
        loadNode(node, resolve) {
            // this.resolveTemp = resolve;
            if (node.level === 0) {
                // 获得根节点
                this.httpClient.httpClientget(this.projectConfig.URL_API_FUNCTION_GET_ROOT_NODE, '').then(res => {
                    let _code = res.meta.code;
                    if (_code == this.projectConfig.CODE_OK) {
                        // 成功加载数据
                        return resolve(res.data);
                    } else {
                        return resolve([]);
                    }
                });
            } else {
                // 加载子节点
                let _id = node.data.id;
                if (typeof _id != 'undefined') {
                    const params = [_id];
                    this.httpClient.getParamOnPath(this.projectConfig.URL_API_FUNCTION_GET_CHILDREN_NODE , params).then(res => {
                        if (res.meta.code == this.projectConfig.CODE_OK) {
                            // 成功加载数据
                            return resolve(res.data);
                        } else {
                            return resolve([]);
                        }
                    })
                }
            };
        }, // loading end
        // 新增功能菜单
        addFunction() {
            // 清楚表单数据
            this.$refs.functionForm.resetFields();
            // 新增
            this.isAddFunction = true;
            this.isUpdateFunction = false;

            // 单选按钮还原
            this.functionForm.isMenu = true;
            this.functionForm.active = false;

            // 禁用删除按钮
            this.disableFunctionDeleteButton = true;

            // 将当前选中的功能菜单ID,赋值到右边的所属功能ID输入框中
            this.functionForm.belongId = this.selectNodeId;

            // 先当前节点名字,在此节点上增加菜单
            this.parentNodeName = this.selectNodeName;
        },
        // 保存功能菜单
        saveFunction() {
            // 表单校验
            this.$refs.functionForm.validate(valid => {
                if (valid) {
                    // 新增功能菜单
                    if (this.isAddFunction) {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.functionForm.name);
                        // 根据功能菜单名字和所属功能ID,判断同一级菜单下,是否存在相同功能菜单
                        this.httpClient.httpClientPost(this.projectConfig.URL_API_FUNCTION_ADD_FUNCTION,this.functionForm).then(res => {
                            // 200 新增成功
                            // 601 数据重复
                            /* let _code = res.meta.code;
                            let _message = res.meta.message;
                            let _type = 'success';

                            if ( _code == 200) {
                                // 清楚页面数据
                                this.addFunction();
                                // 刷新页面
                                this.refushTable();
                            } else if ( _code == 601) {
                                _type = 'warning';
                            } else {
                                _message = '此次操作失败'
                                _type = 'error';
                            }
                            // 弹框提示
							this.$message({
								showClose: true,
								message: _message,
								type: _type,
								duration: 5 * 1000
                            }); */

                            // 进来就是200
                            // 清楚页面数据
                            this.addFunction();
                            // 刷新页面
                            this.refushTable();
                        });
                    }

                    // 修改功能菜单
                    if (this.isUpdateFunction) {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.functionForm.name);
                        this.httpClient.httpClientPatch(this.projectConfig.URL_API_FUNCTION_UPDATE_FUNCTION,this.functionForm).then(res => {
                            /* let _code = res.meta.code;
                            let _msg = res.meta.message;
                            let _type = 'error'
                            if (_code == this.projectConfig.CODE_OK) {
                                _type = 'success';
                                // 刷新页面
                                this.refushTable();
                            } 
                            // 弹框提示
                            this.$message({
                                showClose: true,
                                message: _msg,
                                type: _type,
                                duration: 5 * 1000
                            }); */

                            // 进来就是200
                            // 刷新页面
                            this.refushTable();
                        });
                    }

                } else {
                    return false;
                }
            });
        },
        // 树菜单,重新加载
        reloadTree() {
            this.httpClient.httpClientget(this.projectConfig.URL_API_FUNCTION_GET_ROOT_NODE, '').then(res => {
                /* let _code = res.meta.code;
                if (_code == this.projectConfig.CODE_OK) {
                    this.regions = [];
                    this.regions = res.data;
                }  */
                // 进来就是200
                this.regions = [];
                this.regions = res.data;
            });
        },
        // 删除功能信息
        deleteFunction() {
            let functionId = this.functionForm.id;

            if (functionId.length == 0 && typeof functionId == 'undefined') {
                /* this.$message({
					showClose: true,
					message: '请选择一条功能菜单信息',
					type: 'warning',
					duration: 5 * 1000
                }); */
                this.$notify.info({
					message: '请选择一条功能菜单信息'
				});
            } else {
                this.$confirm('此操作将永久删除该功能菜单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
        		}).then(() => {
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.functionForm.name);
                     // let param = [ functionId ];
                    let deleteUrl = this.projectConfig.URL_API_FUNCTION_DELETE_FUNCTION + '/' + functionId;
					// 执行删除操作
					this.httpClient.httpClientDelete(deleteUrl,'').then( res => {
						let _msg = '删除菜单:' + this.functionForm.name + ',成功';
						/* let _type = 'success';
						if (res.meta.code == 704) {
							_type = 'error';
							_msg = '此次操作失败!';
						} else if (res.meta.code == 601) {
                            _type = 'warning';
							_msg = this.functionForm.name + '菜单下面,还有子菜单,不能删除!';
                        }
						this.$message({
            				type: _type,
							message: _msg,
							showClose: true,
							duration: 5 * 1000
                        }); */
                        // 进来就是200 

                    })
                    
                    // 刷新页面
                    this.refushTable();
					

				}).catch(() => {
					/* this.$message({
						type: 'info',
						message: '已取消删除'
                      }); */
                    /* this.$notify.info({
						title: '消息',
						message: '已取消删除'
					});  */         
        		});
            }
        },
        refushTable() {
            // 清除表单数据
		    this.$refs.functionForm.resetFields();
            // 重载用户搜索数据
            this.isAddFunction = false;
            this.isUpdateFunction = false;
            // 单选按钮还原
            this.functionForm.isMenu = true;
            this.functionForm.active = false;
            // 禁用删除按钮
            this.disableFunctionDeleteButton = true;
            // 重新加载树
            this.reloadTree();
        }
    }
};
</script>

/* 
    样式设置
 */
<style>
.menu .el-bar p {
    margin: 0;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #d1dbe5;
}

.menu .el-tree {
    border: none;
}

.menu .el-form {
    padding: 22px 20px;
}

.menu .el-bar p i {
    color: #777;
    font-size: 15px;
    margin-right: 6px;
}

.menu .yes {
    position: absolute;
    top: 0;
    left: 62%;
}

.menu .form-btn {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    text-align: right;
}
</style>